<template>
  <div class="home-root">
    <van-sticky>
      <van-swipe
        style="height: 3.5rem"
        :show-indicators="false"
        :autoplay="3000"
      >
        <van-swipe-item v-for="(image, index) in bannerList" :key="index">
          <van-image width="100%" height="100%" :src="image" />
          <!-- <img v-lazy="image"/> -->
        </van-swipe-item>
      </van-swipe>
    </van-sticky>

    <div class="price-box flex">
      <div class="row" v-for="item in priceList">
        <div class="text">{{ item.name }}</div>
        <div class="num" v-if="item.up > 0" :style="{ color: '#49C3AE' }">
          {{ item.close }}
        </div>
        <div class="num" v-if="item.up < 0" :style="{ color: '#ce5065' }">
          {{ item.close }}
        </div>
        <div
          class="percentage"
          v-if="item.up > 0"
          :style="{ color: '#49C3AE' }"
        >
          {{ item.up }}%
        </div>
        <div
          class="percentage"
          v-if="item.up < 0"
          :style="{ color: '#ce5065' }"
        >
          {{ item.up }}%
        </div>
      </div>
    </div>

    <div class="authorize-box flex-btw">
      <div class="row" @click="$router.push('/authorize')">
        <div class="title">API授权</div>

        <div class="tips-box flex">
          <div class="text">快捷办理</div>
          <div class="text">一键授权</div>
        </div>
      </div>
      <div class="row" @click="$router.push('/bill')">
        <div class="title">电子账单</div>

        <div class="tips-box flex">
          <div class="text">急速查询</div>
          <div class="text">轻松知晓</div>
        </div>
      </div>
    </div>

    <div class="list-box">
      <van-tabs
        v-model="active"
        color="#2F7AED"
        title-class="title"
        sticky
        offset-top="3.5rem"
        @click="select"
      >
        <van-tab v-for="item in cats" :title="item.name" :id="item.id">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            :offset="2"
            @load="onLoad"
          >
            <div
              class="col"
              v-for="(itemChild, indexChild) in lists"
              :key="indexChild"
              @click="$router.push('/tradeHis?id=' + itemChild.id)"
            >
              <div class="name-box">
                <div class="name">{{ itemChild.name }}/USDT</div>
                <div class="num">数量 {{ itemChild.num }}</div>
              </div>

              <div class="label-box">
                <div class="label">{{ itemChild.label }}</div>
                <div v-if="itemChild.increase > 0" class="profit flex">
                  <div class="text">浮亏</div>
                  <div
                    class="profit"
                    :style="{
                      color: '#49C3AE',
                    }"
                  >
                    +{{ itemChild.profit }}
                  </div>
                </div>
                <div v-if="itemChild.increase === 0" class="profit">
                  <div class="text">浮亏</div>
                  <div
                    class="profit"
                    :style="{
                      color: '#A5A5A5',
                    }"
                  >
                    {{ itemChild.profit }}
                  </div>
                </div>
                <div v-if="itemChild.increase < 0" class="profit">
                  <div class="text">浮亏</div>
                  <div
                    class="profit"
                    :style="{
                      color: '#ce5065',
                    }"
                  >
                    {{ itemChild.profit }}
                  </div>
                </div>
              </div>

              <div
                v-if="itemChild.increase > 0"
                class="btn red-bg"
                :style="{
                  background: '#49C3AE',
                }"
              >
                +{{ itemChild.increase }}%
              </div>             

              <div
                    v-if="itemChild.increase == 0 && itemChild.label === '未设置' "
                    class="btn red-bg"
                    :style="{
                      background: '#A5A5A5',
                    }"
                  >
                    {{ itemChild.increase }}%
                  </div>

                   <div
                    v-if="itemChild.increase == 0 && itemChild.label != '未设置' "
                    class="btn red-bg"
                    :style="{
                      background: '#2d7afe',
                    }"
                  >
                    {{ itemChild.increase }}%
                  </div>

              <div
                v-if="itemChild.increase < 0"
                class="btn red-bg"
                :style="{
                  background: '#ce5065',
                }"
              >
                {{ itemChild.increase }}%
              </div>
            </div>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import mixin from "@/mixin.js";
import { BANNER, NOTICE, MARKET, COIN_LIST } from "@/api/api.js";
import banner1 from "../../assets/images/home/3.png";
import banner2 from "../../assets/images/home/4.png";
import banner3 from "../../assets/images/home/5.png";
export default {
  name: "home",
  mixins: [mixin],
  data() {
    return {
      // 轮播图
      bannerList: [banner1, banner2, banner3],
      // 通知栏
      tips: "180***90用于已完成接单",
      // 币种价格
      priceList: [],
      // 列表数据
      active: 0,
      list: [
        // {title:'火币','platform':1},
        // {title:'Binance','platform':2},
        // {title:'OKEx','platform':3},
        // {title:'比特儿','platform':4}
      ],
      cats: [],
      lists: [],
      platform: 1,
      page: 1,
      // 下拉
      //isLoading: true,
      loading: false,
      finished: false,
    };
  },
  mounted() {
    this.getBanner();
    this.notice();
    this.market();
    this.getAllList(this.platform);
  },
  methods: {
    select(param) {
      this.platform = param + 1;
      this.page = 1;
      this.getAllList(this.platform);
      //this.curId = id;
    },
    async getBanner() {
      const { data } = await this.$reqGet(BANNER, {});
      if (data.status == 1) {
        let banner = data.data.list;
        this.bannerList = banner;
        console.log(this.bannerList);
      }
    },
    async notice() {
      const { data } = await this.$reqGet(NOTICE, {});
      if (data.status == 1) {
        this.tips =
          data.data.list.length > 0 ? data.data.list[0].title : "无最新消息";
      }
    },
    async market() {
      const { data } = await this.$reqGet(MARKET, {});
      if (data.status == 1) {
        this.priceList = data.data.list;
      }
    },
    async getAllList(platform) {
      console.log(this.page);
      const { data } = await this.$reqGet(COIN_LIST, {
        platform: platform,
        page: this.page,
      });
      if (data.status == 1) {
        //console.log(data.data.list);
        this.lists = data.data.list;
        this.cats = data.data.platform_list;
        this.loading = false;
        this.finished = data.data.list.length > 0 ? false : true;
        this.page++;
      }
    },
    async LoadList() {
      this.loading = true;
      const { data } = await this.$reqGet(COIN_LIST, {
        platform: this.platform,
        page: this.page,
      });
      console.log(data.data.list);
      if (data.status == 1 && data.data.list.length > 0) {
        //this.cats = data.data.platform_list;
        let list = data.data.list;
        this.lists = this.lists.concat(list);
        this.loading = false;
        this.page++;
      } else {
        console.log("没有了");
        this.finished = true;
      }
    },
    onLoad() {
      console.log(this.page);
      console.log("onload");
      this.loading = false;
      this.LoadList();
    },
  },
};
</script>
<style lang="scss" scoped="scoped">
.home-root {
  padding-bottom: 1rem;
  .van-swipe {
    .van-swipe-item {
    }
  }

  .van-notice-bar {
    border-bottom: 0.06rem solid #f9f8f8;
  }

  .price-box {
    margin-bottom: 0.06rem;
    .row {
      flex: 1;
      padding: 0.2rem 0 0.23rem 0;
      background-color: #fff;
      .text {
        font-size: 0.2rem;
        font-weight: bold;
      }

      .num {
        margin-bottom: 0.16rem;
        margin-top: 0.13rem;
        font-size: 0.26rem;
        color: #ce5065;
        font-weight: bold;
      }

      .percentage {
        color: #ce5065;
        font-size: 0.2rem;
      }
    }
  }

  .authorize-box {
    padding: 0.25rem 0.3rem;
    background-color: #fff;
    border-bottom: 0.06rem solid #f9f8f8;

    .row {
      width: 3.29rem;
      height: 1.78rem;

      .title {
        margin-left: 0.15rem;
        font-size: 0.26rem;
        color: #fff;
        text-align: left;
        font-weight: bold;
        margin-top: 0.6rem;
      }

      .tips-box {
        margin-left: 0.15rem;
        .text {
          font-size: 0.2rem;
          color: #fff;

          &:nth-child(1) {
            margin-right: 0.2rem;
          }
        }
      }

      &:nth-child(1) {
        background: url("../../assets/images/home/2.png") no-repeat;
        background-size: cover;
      }

      &:nth-child(2) {
        background: url("../../assets/images/home/1.png") no-repeat;
        background-size: cover;
      }
    }
  }

  .list-box {
    .col {
      position: relative;
      padding: 0.3rem;
      display: flex;
      align-items: flex-start;
      background-color: #fff;
      border-top: 0.04rem solid #f9f8f8;

      .name-box {
        width: 2.6rem;
        .name {
          text-align: left;
          font-size: 0.26rem;
          color: #141414;
          margin-bottom: 0.06rem;
          font-weight: bold;
        }

        .num {
          text-align: left;
          font-size: 0.2rem;
          color: #a5a5a5;
        }
      }

      .label-box {
        .label {
          width: 1.22rem;
          height: 0.3rem;
          background-color: #e1f1fe;
          font-size: 0.2rem;
          color: #3270aa;
          margin-bottom: 0.08rem;
        }

        .profit {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 0.02rem;
          .text {
            font-size: 0.2rem;
            color: #a5a5a5;
          }

          .profit {
            font-size: 0.2rem;

            &:nth-child(1) {
            }
          }
        }
      }

      .btn {
        position: absolute;
        right: 0.3rem;
        top: 0.3rem;
        width: 1.21rem;
        height: 0.55rem;
        line-height: 0.55rem;
        font-size: 0.2rem;
        color: #fff;
        border-radius: 0.1rem;
      }
    }
  }
}
</style>
